<template>
  <div class="box">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <img class="icon2" src="../../assets/PC/金融服务/组31.png" alt="" />
          </div>
          <span style="margin-left: -4px">企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <img class="icon2" src="../../assets/PC/金融服务/组31.png" alt="" />
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组34.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <!-- 身份证正反面 -->
      <div class="license" style="margin-top: 35px">
        <div style="display: flex; margin-left: 80px">
          <span class="bbb"><span style="color: #f00">*</span> 票据正反面</span>
          <!-- 正面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload1"
          >
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove1(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <!-- 反面 -->

          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-reverse"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeReverse"
            :http-request="uploadFileReverse"
            ref="pictureUpload2"
          >
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove2(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <!-- --------------------------------------------------- -->
          <div class="license-right card-right">
            <div>
              <el-popover placement="top-start" trigger="hover">
                <div v-viewer>
                  <img
                    style="width: 45px; height: 45px"
                    src="http://operate.thunlink.cn/protocol/image/u185.png"
                    alt=""
                  />
                  <img
                    style="width: 45px; height: 45px; margin-left: 10px"
                    src="http://operate.thunlink.cn/protocol/image/u186.png"
                    alt=""
                  />
                </div>
                <template #reference>
                  <p class="examine" style="width: 60px">查看示例</p>
                </template>
              </el-popover>
              <p>说明：</p>
              <p>1.确保商票图像完整清晰；</p>
              <p>2.上传文件大小不超过5M；</p>
              <p>3.仅支持bmp、jpeg、png、jpg格式文件。</p>
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li>
          <el-form ref="forms" :model="form" label-width="200px" :rules="rules">
            <el-form-item label="票据号码" prop="a">
              <el-input type="string" @blur="a()" v-model="form.a" />
            </el-form-item>
          </el-form>
          <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
            <el-form-item label="票面金额" prop="b">
              <el-input
                @blur="costChangeB"
                @focus="
                  () => {
                    this.form.b = remoney(this.form.b);
                  }
                "
                @input="limitInput($event, 'b')"
                v-model="form.b"
                placeholder=""
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 15px;
                  top: 0px;
                  z-index: 998;
                  font-size: 16px;
                "
              >
                元
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="forms" :model="form" label-width="120px" :rules="rules">
            <el-form-item label="承兑人名称" prop="c">
              <el-input v-model="form.c" @blur="a()" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
            <el-form-item label="票据到期日" prop="d">
              <el-date-picker
                :clearable="false"
                v-model="form.d"
                @blur="a()"
                type="date"
                placeholder=""
                style="width: 240px"
                size="large"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="forms" :model="form" label-width="200px" :rules="rules">
            <el-form-item label="承兑人银行账号" prop="e">
              <el-input v-model="form.e" @blur="a()" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="forms" :model="form" label-width="140px" :rules="rules">
            <el-form-item label="承兑人开户行行号" prop="f">
              <el-input v-model="form.f" @blur="a()" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
    </div>
    <!-- 发票信息 -->
    <div class="f3">
      <div class="notNull">
        <!-- 发票信息表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>发票信息</h4>
          <h5 @click="newlyInvoiceBtn()">新增</h5>
        </div>
        <!-- 空状态 -->
        <div v-if="!invoiceData" class="null">
          <img src="../../assets/PC/金融服务/暂无记录.png" alt="" />
          <p>暂无数据记录</p>
        </div>
        <!-- 2.表格 -->
        <el-table
          v-else
          :data="invoiceData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#f3f3f3',
            color: '#4D4D4D',
          }"
        >
          <template v-slot:empty>
            <div>暂无数据</div>
          </template>
          <!-- <el-table-column type="selection" min-width="6%" align="center">
          </el-table-column> -->
          <el-table-column
            prop="number"
            label="序号"
            min-width="80"
            align="center"
            fixed="left"
          >
          </el-table-column>
          <el-table-column
            prop="invCode"
            label="发票代码"
            min-width="210"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="invNo"
            label="发票编号"
            min-width="210"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="invAmount"
            label="发票金额 (元) "
            min-width="150"
            align="center"
          >
            <template #default="scope">{{
              getArea(scope.row.invAmount)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="currency"
            label="币种"
            min-width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="invDate"
            label="开票日期"
            min-width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="contractno"
            label="合同编号"
            min-width="210"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="发票详情"
            min-width="100"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <span
                class="span"
                @click="checkContract(scope.$index, invoiceData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="120"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <span
                class="span"
                @click="updateInvoice(scope.$index, invoiceData)"
                type="text"
                size="small"
              >
                编辑
              </span>
              <span
                class="span del"
                @click="delInvoice(scope.$index, invoiceData)"
                type="text"
                size="small"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 3.说明文字 -->
        <div class="explain">
          <div class="explain-left">
            <span>说明：</span>
          </div>
          <div class="explain-right">
            <p>
              （1）请逐一准确填写上述信息，每行所填写信息应与上传文件逐一对应，确保发票已加盖专用章，图像完整清晰
              ；
            </p>
            <p>
              （2）发票有“详见销货清单”字样时，请将销货单与发票打包后一并上传 ；
            </p>
            <p>
              （3）一张发票对应多份合同时，合同编码栏填写多份合同对应编码，不同编码中间用“，”分隔。
            </p>
          </div>
        </div>

        <!-- 合同信息表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>合同信息</h4>
          <h5 @click="newlyContractBtn()">新增</h5>
        </div>
        <!-- 空状态 -->
        <div v-if="!contractData" class="null">
          <img src="../../assets/PC/金融服务/暂无记录.png" alt="" />
          <p>暂无数据记录</p>
        </div>
        <!-- 2.表格 -->
        <el-table
          v-else
          :data="contractData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#f3f3f3',
            color: '#4D4D4D',
          }"
        >
          <template v-slot:empty>
            <div>暂无数据</div>
          </template>
          <el-table-column
            prop="number"
            label="序号"
            min-width="3%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="conNo"
            label="合同编号"
            min-width="8%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="conName"
            label="合同名称"
            min-width="5%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="conAmount"
            label="合同金额 (元) "
            min-width="5%"
            align="center"
          >
            <template #default="scope">{{
              getArea(scope.row.conAmount)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="currency"
            label="币种"
            min-width="4%"
            align="center"
          >
          </el-table-column>

          <el-table-column label="合同详情" min-width="4%" align="center">
            <template #default="scope">
              <span
                class="span"
                @click="checkContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="4%" align="center">
            <template #default="scope">
              <span
                class="span"
                @click="updateContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                编辑
              </span>
              <span
                class="span del"
                @click="delContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 3.说明文字 -->
        <div class="explain">
          <div class="explain-left">
            <span>说明：</span>
          </div>
          <div class="explain-right">
            <p>
              （1）请逐一填写合同信息，如为框架合同，合同金额处填写融资发票合计金额，合同总金额应大于等于发票金额
              ；
            </p>
            <p>
              （2）请确保合同印章清晰，图像清晰完整，合同附件与附件清单打包后一并上传，并加盖骑缝章；
            </p>
            <p>
              （3）框架合同，请将与融资发票对应的订单或发货单等文件与合同打包后一并上传。
            </p>
          </div>
        </div>
      </div>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="submitBtn()"
          v-if="radio"
          src="@/assets/PC/金融服务/组38.png"
          alt=""
        />
        <img
          @click="submitBtn()"
          v-else
          src="@/assets/PC/金融服务/组39.png"
          alt=""
        />
        <span> 阅读并同意 </span>
        <a @click="submitBtn()">《企业授权协议》、</a>
        <a @click="submitBtn()" target="_back">《技术服务协议》</a>
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <div class="btn btn1" @click="goLast()">上一步</div>
        <button
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中',
          }"
          @click="submit()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 弹框部分 -->
    <!-- 新增发票弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="上传发票信息"
      v-model="newlyInvoiceVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item prop="invCode" label="发票代码">
                <el-input
                  v-model="formInvoice.invCode"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票编号" prop="invNo">
                <el-input v-model="formInvoice.invNo" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票金额 (元) " prop="invAmount">
                <el-input
                  @blur="costChangeInvAmount"
                  @focus="
                    () => {
                      this.formInvoice.invAmount = remoney(
                        this.formInvoice.invAmount
                      );
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formInvoice.invAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formInvoice.currency"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="开票日期" prop="invDate">
                <el-date-picker
                  :clearable="false"
                  v-model="formInvoice.invDate"
                  type="date"
                  style="width: 240px"
                  size="large"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="合同编码" prop="contractno">
                <el-input
                  v-model="formInvoice.contractno"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="发票上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn1" @click="callOffInvoice()">
            取 消
          </button>
          <button
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="updateCoopeorgInvoice('formInvoiceRef')"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增发票弹框结束 -->
    <!-- 新增合同弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="新增合同"
      v-model="newlyContractVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同编号" prop="conNo">
                <el-input
                  v-model="formContract.conNo"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同名称" prop="conName">
                <el-input
                  v-model="formContract.conName"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同金额 (元) " prop="conAmount">
                <el-input
                  @blur="costChangeConAmount"
                  @focus="
                    () => {
                      this.formContract.conAmount = remoney(
                        this.formContract.conAmount
                      );
                    }
                  "
                  v-model="formContract.conAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formContract.currency"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="合同上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn1" @click="callOffContract()">
            取 消
          </button>
          <button
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="updateCoopeorgContract()"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增合同弹框结束 -->
    <!-- 编辑弹框部分 -->
    <!-- 编辑发票弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="编辑发票信息"
      v-model="updateInvoiceVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item prop="invCode" label="发票代码">
                <el-input
                  v-model="formInvoice.invCode"
                  placeholder="请输入发票代码"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票编号" prop="invCode">
                <el-input
                  v-model="formInvoice.invNo"
                  placeholder="请输入发票编号"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票金额 (元) " prop="invAmount">
                <el-input
                  @blur="costChangeInvAmount"
                  @focus="
                    () => {
                      this.formInvoice.invAmount = remoney(
                        this.formInvoice.invAmount
                      );
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formInvoice.invAmount"
                  placeholder="请输入发票金额"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formInvoice.currency"
                  placeholder="请输入币种"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="开票日期" prop="invDate">
                <el-date-picker
                  v-model="formInvoice.invDate"
                  type="date"
                  placeholder="请输入开票日期"
                  :clearable="false"
                  style="width: 240px"
                  size="large"
                  value-format="YYYY-MM-DD"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="合同编码" prop="contractno">
                <el-input
                  v-model="formInvoice.contractno"
                  placeholder="请输入合同编码"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="重新上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn1" @click="callOffInvoice()">
            取 消
          </button>
          <button
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="updateInvoiceData()"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑发票弹框结束 -->
    <!-- 编辑合同弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="编辑合同信息"
      v-model="updateContractVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同编号" prop="conNo">
                <el-input
                  v-model="formContract.conNo"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同名称" prop="conName">
                <el-input
                  v-model="formContract.conName"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同金额 (元) " prop="conAmount">
                <el-input
                  @blur="costChangeConAmount"
                  @focus="
                    () => {
                      this.formContract.conAmount = remoney(
                        this.formContract.conAmount
                      );
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formContract.conAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formContract.currency"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="重新上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn1" @click="callOffContract()">
            取 消
          </button>
          <button
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="updateCoopeorgData()"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑合同弹框结束 -->
    <!-- 查看票据正反面信息 -->
    <el-dialog
      title="票据示例"
      v-model="contractCardbackVisible"
      width="35%"
      center
    >
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="1 > 0"
        style="text-align: center; width: 300px; heigth: 300px; z-index: 998"
        class="dialog-centers"
        @click="contractCardbackVisible = false"
      >
        <img
          style="width: 100%; heigth: 100%; margin-bottom: 15px; z-index: 998"
          src="../../../public/img/u185.png"
          alt=""
        />
        <img
          style="width: 100%; heigth: 100%; z-index: 998"
          src="../../../public/img/u186.png"
          alt=""
        />
        <p style="margin-top: 20px">点击图片可查看大图</p>
      </div>
      <div
        v-else
        style="text-align: center; margin-bottom: 30px"
        class="dialog-centers"
      >
        <h4>暂无详细资料</h4>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <template #footer>
        <div class="dialog-footer">
          <button
            class="dialog-footer-bnt btn1"
            @click="contractCardbackVisible = false"
          >
            取 消
          </button>
          <button
            class="dialog-footer-bnt btn2"
            @click="contractCardbackVisible = false"
          >
            确 定
          </button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      v-model="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="item in list"
              :key="item.url"
              :label="item.name"
              :name="item.names"
            >
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button
            :disabled="isLock"
            class="dialog-footer-bnt btn2"
            @click="sign"
          >
            去签署
          </button>
        </div>
      </template>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title=""
      v-model="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>签署短信已发送至经办人手机{{ getPhone(operatetel) }}、</p>
        <p>法定代表人手机{{ getPhone(officertel) }}，</p>
        <p>请点击短信签署链接完成签署操作。</p>
      </div>
      <!-- 按钮区域 -->
      <template #footer>
        <div class="dialog-footer">
          <button class="dialog-footer-bnt btn2" @click="aaaa">确定</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  base,
  Contracts,
  createContractReview,
  Contract,
  getInvoice,
  delInvoice,
  updateInvoice,
  getContract,
  delContract,
  updateContract,
  getFilePath,
  updateapplyid,
} from "@/utils";
import { ElMessage, ElLoading } from "element-plus";
import { desensitization, AreaDispose } from "@/utils/filters.js";
export default {
  data() {
    return {
      submitMessage: "提交",
      fpid: [],
      htid: [],
      isLock: false,
      procedureid: "", //产品Id
      applyName: "", //申请文件表格中文件名称
      newlyInvoiceVisible: false, // 新增发票弹框状态变量
      updateInvoiceVisible: false, //编辑发票弹框状态变量
      newlyContractVisible: false, //新增合同弹框状态变量
      updateContractVisible: false, //编辑合同弹框状态变量
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",
      //发票信息表单数据对象
      formInvoice: {
        invCode: "", //发票代码
        invNo: "", //发票编号
        invAmount: "", //金额
        currency: "人民币", //币种
        invDate: "", //开票日期
        contractno: "", //合同编码
        id: "", //每个列表的唯一id
      },
      //发票信息表单数据对象
      formInvoices: {
        invAmount: "",
      },
      //合同信息表单数据对象
      formContract: {
        conNo: "", //合同编号
        conName: "", //合同名称
        conAmount: "", //合同金额
        currency: "人民币", //币种
        id: "", //id
      },
      //合同信息表单数据对象
      formContracts: {
        conAmount: "",
      },

      // 发票表格数据
      invoiceData: null,
      // 合同表格数据
      contractData: null,
      // 表单验证
      // 发票弹框表单验证
      formInvoiceRules: {
        invCode: [{ required: true, message: " ", trigger: "blur" }],
        invNo: [{ required: true, message: " ", trigger: "blur" }],
        invAmount: [{ required: true, message: " ", trigger: "blur" }],
        currency: [{ required: true, message: " ", trigger: "blur" }],
        invDate: [{ required: true, message: " ", trigger: "change" }],
        contractno: [{ required: true, message: " ", trigger: "blur" }],
      },
      // 合同弹框表单验证
      formContractRules: {
        conNo: [{ required: true, message: " ", trigger: "blur" }],
        conName: [{ required: true, message: " ", trigger: "blur" }],
        conAmount: [{ required: true, message: " ", trigger: "blur" }],
        currency: [{ required: true, message: " ", trigger: "blur" }],
      },
      isLock: false,
      dialogImageUrl: "",
      flowId: "",
      dialogVisible: false,
      imgUrl: "",
      dialogVisible: false,
      dialogUrl: "",
      producttype: "", //产品类型
      applyid: "", //路由地址中获取的关联ID
      contractCardbackVisible: false,
      radio: false, //企业授权服务状态变量
      btn: false,
      fileListFront: [],
      fileListReverse: [],
      base: "",
      // 合同签署
      QYSQreportUrl: "",
      JSFWreportUrl: "",
      activeName: "first", //标签页默认
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      disabled: false,
      officertel: "", //法人手机号
      operatetel: "", //经办人手机号
      loading: true,
      list: null,

      procedureId: "", // 从路由地址中获取产品ID,保存到状态变量中
      flowId: "",
      // 合同签署数据
      contract: {
        applyid: "",
        entname: "",
        FRaccountid: "",
        inputdate: "",
        JBRaccountid: "",
        licenseno: "",
        mainindname: "",
        officer: "",
        officertel: "",
        ORGaccountid: "",
        productcode: "",
        radio: "",
        ticketadder: "",
        ticketbank: "",
        ticketbankno: "",
        tickethead: "",
        ticketno: "",
        tickettel: "",
        signday: "",
        step: "apply",
      },
      contractStatuss: true,
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
        e: "",
        f: "",
        acceptorAccountBank: "", //承兑人开户行名称
        issueDate: "", //出票日期
        issuerName: "", //出票人名称
        acceptanceDate: "", //承兑日期
        draftStatus: "", //票据状态
      },
      // 用户填写资料表格
      addform: {
        b: "",
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "blur" }],
        e: [{ required: true, message: " ", trigger: "blur" }],
        f: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  // 监听器
  watch: {
    fileListFront() {
      if (this.fileListFront.length == 0) return;
      this.submitBtns();
      let formData = new FormData();
      formData.append("file", this.fileListFront);
      let token = localStorage.getItem("token");
      let url = this.base + "/api/BusinessSPs/ocr";
      this.axios
        .post(url, formData, {
          headers: { "Content-Type": "multipart/form-data", "x-auth": token },
        })
        .then((res) => {
          if (res.data.code == 100) {
            let bankCard = res.data.data.ticketdata;
            this.form.a = bankCard.draftNumber;
            this.form.c = bankCard.acceptorName;
            this.form.d = bankCard.validToDate;
            this.form.e = bankCard.acceptorAccountNumber;
            this.form.f = bankCard.acceptorBankNumber;

            this.form.acceptorAccountBank = bankCard.acceptorAccountBank;
            this.form.issueDate = bankCard.issueDate;
            this.form.issuerName = bankCard.issuerName;
            this.form.acceptanceDate = bankCard.acceptanceDate;
            this.form.draftStatus = bankCard.draftStatus;
            // this.bankCard.serialno = res.data.data.fileId;
            if (
              parseInt(Number(bankCard.totalAmount), 10) !=
              Number(bankCard.totalAmount)
            ) {
              this.form.b = Number(bankCard.totalAmount).toLocaleString();
            } else {
              this.form.b =
                Number(bankCard.totalAmount).toLocaleString() + ".00";
            }
            this.addform.b = bankCard.totalAmount;
            this.submitBtns();
          } else {
            ElMessage.error("OCR识别失败");
          }
        });
    },
    fileListReverse() {
      this.submitBtns();
    },
    invoiceData() {
      this.submitBtns();
    },
    contractData() {
      this.submitBtns();
    },
  },
  // 生命周期函数
  mounted() {
    this.operatetel = localStorage.getItem("userPhone");
    this.officertel = localStorage.getItem("userPhone");

    // 获取地址栏中参数
    // this.contract.applyid = this.shangPiaoApplyParameter.applyid;
    this.producttype = localStorage.getItem("show01");
    this.contract.productcode = localStorage.getItem("productcode");
    this.producttype = "91";
    this.productname = localStorage.getItem("productname");
    this.productid = localStorage.getItem("productcodeId");
    this.base = base;
    // 获取发票列表
    this.getInvoice();
    // 获取合同列表
    this.getContract();
    this.random();
    this.getTime();
  },
  methods: {
    //手机号脱敏
    getPhone(value) {
      return desensitization(value);
    },
    // 金额处理
    getArea(value) {
      return AreaDispose(value);
    },
    // 获取当前时间
    getTime() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds(); //秒
      var weekArr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.contract.signday =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds;
    },
    // 生成随机数
    random() {
      // 定义存放生成随机数的数组
      var array = new Array();
      // 循环N次生成随机数
      for (var i = 0; ; i++) {
        // 只生成10个随机数
        if (array.length < 10) {
          generateRandom(10);
        } else {
          break;
        }
      }
      // 循环遍历随机数数组
      let num = "";
      for (var i = 0; i < array.length; i++) {
        num += array[i];
      }
      // 生成随机数的方法
      function generateRandom(count) {
        var rand = parseInt(Math.random() * count);
        for (var i = 0; i < array.length; i++) {
          if (array[i] == rand) {
            return false;
          }
        }
        array.push(rand);
      }
      this.applyid = num;
    },
    del: function () {
      this.imgUrl = "";
      this.dialogUrl = "";
    },
    // 点击确认按钮
    async submit() {
      if (this.submitMessage == "提交中") return;
      if (!this.btn) return;
      if (
        (this.form.a != "") &
        (this.form.b != "") &
        (this.form.c != "") &
        (this.form.d != "") &
        (this.form.e != "") &
        (this.form.f != "") &
        this.radio &
        (this.fileListFront.length != 0) &
        (this.fileListReverse.length != 0) &
        (this.invoiceData != null) &
        (this.contractData != null)
      ) {
        if (
          !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
          !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name)
        ) {
          ElMessage.warning("暂不支持上传该格式文件");
          return;
        }
        this.submitMessage = "提交中";
        let formData = new FormData();
        formData.append("file", this.fileListFront);
        formData.append("files", this.fileListReverse);
        let token = localStorage.getItem("token");
        let {
          a,
          c,
          d,
          e,
          f,
          acceptorAccountBank,
          issueDate,
          issuerName,
          acceptanceDate,
          draftStatus,
        } = this.form;
        let { b } = this.addform;
        let url =
          this.base +
          `/api/BusinessSPs/findaddsp?billnumber=${a}&faceamount=${b}&acceptorname=${c}&billdate=${d}&acceptorbank=${f}&acceptorbanking=${e}&itemno=Front&itemnos=Fronts&objecttype=piaoju&applyid=${this.applyid}&producttype=${this.producttype}&acceptorAccountBank=${acceptorAccountBank}&issuedate=${issueDate}&issuername=${issuerName}&acceptancedate=${acceptanceDate}&draftstatus=${draftStatus}&productcode=${this.contract.productcode}&productname=${this.productname}&productid=${this.productid}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            let htid = this.htid.join("@");
            let fpid = this.fpid.join("@");
            if (res.data.msg == "ok") {
              let applyid = res.data.data.sPticketinfo.applyid;
              let url =
                base +
                `/api/BusinessSPs/updatefpht?applyid=${applyid}&fpid=${fpid}&htid=${htid}`;
              let pads = {};
              this.axios
                .post(url, pads, {
                  headers: {
                    "Content-Type": "multipart/form-data",
                    "x-auth": token,
                  },
                })
                .then((datas) => {});
              localStorage.setItem("productcode", this.contract.productcode);
              updateapplyid(res.data.data.sPticketinfo.applyid, this.flowId);
              this.submitMessage = "提交";
              this.$router.push(`/enquiryApply3`);
            } else {
              this.submitMessage = "提交";
              ElMessage.error("文件上传失败，请检查文件信息");
            }
          });
      } else {
        this.submitMessage = "提交";
        ElMessage.error("请填写/上传申请信息/文件");
      }
    },
    // 新增发票
    // 点击新增弹出输入框
    newlyInvoiceBtn() {
      this.newlyInvoiceVisible = true;
    },
    // 点击取消弹框
    callOffInvoice() {
      this.newlyInvoiceVisible = false;
      this.updateInvoiceVisible = false;
      this.formInvoice.invCode = "";
      this.formInvoice.invNo = "";
      this.formInvoice.invAmount = "";
      this.formInvoice.invDate = "";
      this.formInvoice.contractno = "";
      this.fileList = [];
    },
    // 点击弹框确认按钮,新增发票
    async updateCoopeorgInvoice() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      if (
        (this.formInvoice.invCode != "") &
        (this.formInvoice.invNo != "") &
        (this.formInvoice.invAmount != "") &
        (this.formInvoice.currency != "") &
        (this.formInvoice.invDate != "") &
        (this.formInvoice.contractno != "") &
        (this.fileList.length != 0)
      ) {
        let token = localStorage.getItem("token");

        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let { invCode, contractno, currency, invDate, invNo } =
          this.formInvoice;
        let { invAmount } = this.formInvoices;
        let url =
          this.base +
          `/api/Invoice/addInvoice?objecttype=invoice&newfilename=${this.formInvoice.invCode}&applyid=${this.applyid}&currency=${currency}&invAmount=${invAmount}&invDate=${invDate}&invCode=${invCode}&contractno=${contractno}&invNo=${invNo}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              ElMessage.success("新增成功");
              this.formInvoice.invCode = "";
              this.formInvoice.invNo = "";
              this.formInvoice.invAmount = "";
              this.formInvoice.invDate = "";
              this.formInvoice.contractno = "";
              this.fileList = [];
              this.getInvoice();
              this.newlyInvoiceVisible = false;
              this.fpid.push(res.data.data.tblInvoice1.id);
            } else {
              ElMessage.error("文件上传失败，请检查文件信息");
            }
          });
      } else {
        ElMessage.error("请填写/上传发票信息/文件");
      }
    },
    // 点击删除按钮
    async delInvoice(index, row) {
      let id = row[index].id;
      let data = await delInvoice(id);
      if (data.msg == "ok") {
        ElMessage.success("删除成功");
        this.getInvoice();
      }
      return data;
    },
    // 点击编辑按钮弹框
    updateInvoice(index, row) {
      let data = row[index];
      this.updateInvoiceVisible = true;
      // 将数据回显在输入框中
      this.formInvoice.invCode = data.invCode;
      this.formInvoice.invNo = data.invNo;
      this.formInvoice.invAmount = data.invAmount;
      this.formInvoice.invDate = data.invDate;
      this.formInvoice.contractno = data.contractno;
      this.formInvoice.id = data.id;
      // 合同金额
      if (data.invAmount) {
        if (parseInt(Number(data.invAmount), 10) != Number(data.invAmount)) {
          this.formInvoice.invAmount = Number(data.invAmount).toLocaleString();
        } else {
          this.formInvoice.invAmount =
            Number(data.invAmount).toLocaleString() + ".00";
        }
      }
      this.formInvoices.invAmount = data.invAmount;
    },
    // 点击编辑弹框确认按钮
    async updateInvoiceData() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      let params = {
        invCode: this.formInvoice.invCode,
        invNo: this.formInvoice.invNo,
        invAmount: this.formInvoices.invAmount,
        currency: this.formInvoice.currency,
        invDate: this.formInvoice.invDate,
        contractno: this.formInvoice.contractno,
        id: this.formInvoice.id,
      };
      if (this.fileList.length == 0) {
        if (
          (this.formInvoice.invCode != "") &
          (this.formInvoice.invNo != "") &
          (this.formInvoice.invAmount != "") &
          (this.formInvoice.currency != "") &
          (this.formInvoice.invDate != "") &
          (this.formInvoice.contractno != "")
        ) {
          let data = await updateInvoice(params);
          if (data.msg == "ok") {
            this.updateInvoiceVisible = false;
            this.getInvoice();
            ElMessage.success("编辑成功");
            this.formInvoice.invCode = "";
            this.formInvoice.invNo = "";
            this.formInvoice.invAmount = "";
            this.formInvoice.invDate = "";
            this.formInvoice.contractno = "";
          } else {
            ElMessage.error("修改失败请检查数据");
          }
        } else {
          ElMessage.error("请填写发票信息");
        }
      } else {
        // 上传图片
        let token = localStorage.getItem("token");
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/Invoice/updateInvoice?id=${this.formInvoice.id}&currency=${this.formInvoice.currency}&invAmount=${this.formInvoices.invAmount}&invDate=${this.formInvoice.invDate}&invCode=${this.formInvoice.invCode}&contractno=${this.formInvoice.contractno}&invNo=${this.formInvoice.invNo}&objecttype=invoice&newfilename=${this.formInvoice.invCode}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              ElMessage.success("编辑成功");
              this.formInvoice.invCode = "";
              this.formInvoice.invNo = "";
              this.formInvoice.invAmount = "";
              this.formInvoice.invDate = "";
              this.formInvoice.contractno = "";
              this.fileList = [];
              this.getInvoice();
              this.updateInvoiceVisible = false;
            } else {
              ElMessage.error("文件上传失败，请检查文件信息");
            }
          });
      }
    },
    // 1.调用接口，获取发票信息列表
    async getInvoice() {
      let { data } = await getInvoice(this.applyid);
      this.invoiceData = data;
      for (let i = 0; i < data.length; i++) {
        this.invoiceData[i].number = i + 1;
      }
      if (data.length == 0) {
        this.invoiceData = null;
      }
      return data;
    },
    // 关闭弹窗
    handleClose() {
      this.applyFileVisible = false;
      this.newlyContractVisible = false;
      this.updateContractVisible = false;
      this.updateInvoiceVisible = false;
      this.newlyInvoiceVisible = false;
      this.fileList = [];
    },
    // 点击文件
    handlePreview(file) {},
    //删除文件
    handleRemove(file, fileList) {},
    // 判断用户上传的·是否为图片
    beforeAvatarUpload(file) {},
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    //自定义上传文件
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    // 新增合同
    newlyContractBtn() {
      this.newlyContractVisible = true;
    },
    // 点击取消弹框
    callOffContract() {
      // ElMessage.warning("取消编辑");
      this.newlyContractVisible = false;
      this.updateContractVisible = false;
      this.formContract.conNo = "";
      this.formContract.conName = "";
      this.formContract.conAmount = "";
      this.fileList = [];
    },
    // 点击弹框确认按钮，新增合同信息
    async updateCoopeorgContract() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      if (
        (this.formContract.conNo != "") &
        (this.formContract.conName != "") &
        (this.formContract.conAmount != "") &
        (this.formContract.currency != "") &
        (this.fileList.length != 0)
      ) {
        let { conNo, conName, currency } = this.formContract;
        let { conAmount } = this.formContracts;
        let token = localStorage.getItem("token");
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/TblContract/addContract?objecttype=contract&newfilename=${conName}&applyid=${this.applyid}&conNo=${conNo}&conName=${conName}&conAmount=${conAmount}&currency=${currency}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.newlyContractVisible = false;
              ElMessage.success("新增成功");
              this.getContract();
              this.formContract.conNo = "";
              this.formContract.conName = "";
              this.formContract.conAmount = "";
              this.htid.push(res.data.data.tblContract.id);
              this.fileList = [];
            } else {
              ElMessage.error("文件上传失败，请检查文件信息");
            }
          })
          .catch((err) => {
            ElMessage.error("上传失败");
            this.fileList = [];
          });
      } else {
        ElMessage.error("请填写/上传合同信息/文件");
      }
    },
    // 编辑某项合同信息
    updateContract(index, row) {
      let data = row[index];
      this.updateContractVisible = true;
      // 回显数据
      this.formContract.conNo = data.conNo;
      this.formContract.conName = data.conName;
      this.formContract.currency = data.currency;
      this.formContract.id = data.id;
      // 合同金额
      if (data.conAmount) {
        if (parseInt(Number(data.conAmount), 10) != Number(data.conAmount)) {
          this.formContract.conAmount = Number(data.conAmount).toLocaleString();
        } else {
          this.formContract.conAmount =
            Number(data.conAmount).toLocaleString() + ".00";
        }
      }
      this.formContracts.conAmount = data.conAmount;
      // ;
    },
    // 点击编辑弹框确认按钮
    async updateCoopeorgData() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      let { conNo, conName, currency } = this.formContract;
      let { conAmount } = this.formContracts;
      conAmount = conAmount.toString();
      let parameter = {
        conNo: this.formContract.conNo,
        conName: this.formContract.conName,
        currency: this.formContract.currency,
        conAmount: this.formContracts.conAmount,
        id: this.formContract.id,
      };
      if (this.fileList.length == 0) {
        if (
          conNo.trim() == "" ||
          conName.trim() == "" ||
          currency.trim() == "" ||
          conAmount.trim() == ""
        )
          return ElMessage.error("请填写发票信息");
        let data = await updateContract(parameter);
        if (data.msg == "ok") {
          this.fileList = [];
          this.updateContractVisible = false;
          ElMessage.success("编辑成功");
          this.getContract();
          this.formContract.conNo = "";
          this.formContract.conName = "";
          this.formContract.conAmount = "";
          this.formContract.currency = "";
        }
      } else {
        // 上传图片
        let token = localStorage.getItem("token");
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/TblContract/updateContract?objecttype=contract&newfilename=${conName}&id=${this.formContract.id}&currency=${currency}&conName=${conName}&conAmount=${conAmount}&conNo=${conNo}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.fileList = [];
              this.updateContractVisible = false;
              ElMessage.success("编辑成功");
              this.getContract();
              this.formContract.conNo = "";
              this.formContract.conName = "";
              this.formContract.conAmount = "";
              this.formContract.currency = "";
            } else {
              ElMessage.error("文件上传失败，请检查文件信息");
            }
          });
      }
    },
    // 鼠标移开发票信息金额变化
    costChangeInvAmount(e) {
      let a = Number(e.target.value);
      a = a.toFixed(2);
      if (a == "NaN") return (this.formInvoice.invAmount = "");
      this.formInvoices.invAmount = this.formInvoice.invAmount;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.formInvoice.invAmount = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.formInvoice.invAmount = this.fmoney(this.formInvoice.invAmount);
    },
    // 鼠标移开合同信息金额变化
    costChangeConAmount(e) {
      let a = Number(e.target.value);
      a = a.toFixed(2);
      if (a == "NaN") return (this.formContract.conAmount = "");
      this.formContracts.conAmount = this.formContract.conAmount;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.formContract.conAmount = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.formContract.conAmount = this.fmoney(this.formContract.conAmount);
    },

    // 删除某项合同信息
    async delContract(index, row) {
      let data = await delContract(row[index].id);
      if (data.msg == "ok") {
        ElMessage.success("删除成功");
        this.getContract();
      }
    },
    // 合同 获取合同信息列表
    async getContract() {
      let { data } = await getContract(this.applyid);
      this.contractData = data;
      for (let i = 0; i < data.length; i++) {
        this.contractData[i].number = i + 1;
      }
      if (data.length == 0) {
        this.contractData = null;
      }
      return data;
    },
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = [];
    },

    handleChangeFront(file, fileList) {
      this.submitBtns();
      this.fileListFront = fileList[0].raw;
    },
    //自定义上传文件
    uploadFileFront(file) {
      this.formData.append("file", file.file);
    },
    // 反面——————————————————————————————————————————————————————————
    handleChangeReverse(file, fileList) {
      this.submitBtns();
      this.fileListReverse = fileList[0].raw;
    },
    //自定义上传文件
    uploadFileReverse(file) {
      this.formData.append("file", file.file);
    },
    // 点击上一步
    goLast() {
      this.$router.go(-1);
    },

    // 点击查看示例，查看票就正反面信息
    examineBll() {
      let list = [
        { path: "http://operate.thunlink.cn/protocol/image/u185.png" },
        { path: "http://operate.thunlink.cn/protocol/image/u186.png" },
      ];
      let fileUrl = null;
      for (let i = 0; i < list.length; i++) {
        fileUrl = list[i].path;
        const a = document.createElement("a");
        a.href = fileUrl;
        a.target = "_blank";
        a.click();
      }
    },
    // 查看发票详情
    async checkContract(index, row) {
      let id = row[index].id;
      let data = await getFilePath(id);
      if (data.code == 100) {
        let fileUrl = data.data[0].path;
        const a = document.createElement("a");
        a.href = fileUrl;
        a.target = "_blank";
        a.click();
      }
    },
    costChangeB(e) {
      let a = Number(e.target.value);
      a = a.toFixed(2);
      if (a == "NaN") return (this.form.b = "");
      this.submitBtns();
      this.addform.b = this.form.b;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.b = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.form.b = this.fmoney(this.form.b);
    },
    // 表单格式转换
    limitInput(value, name) {
      this.addform[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == "" || s == null || (s == undefined) | isNaN(Number(s))) {
        return s;
      }
      s = Number(s) ? Number(s) : s;
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s.split(".")[0].split("").reverse();
      var r = s.split(".")[1];
      var t = "";
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      if (n > 0) {
        r = "." + r;
      } else if (n == 0) {
        r = "";
      }
      let returnT = t.split("").reverse().join("") + r;
      //负数处理
      if (returnT[0] == "-" && returnT[1] == ",") {
        returnT = "-" + returnT.substring(2);
      }
      return returnT;
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = "";
      if (s) {
        str = String(s).replace(/,/g, "");
      }
      if (s && (s + "").indexOf(".") > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, "");
      } else if (s && Number(str)) {
        return str;
      } else {
        return s;
      }
    },
    // 点击去签署按钮
    async sign() {
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 1000);
      this.loading = true;
      let data = await Contract(this.contract);
      if (data.code == 100) {
        this.loading = false;
        this.radio = true;
        this.submitBtns();
        this.showAgreementVisible = false;
        this.hintVisible = true;
        this.flowId = data.data.flowId;
      } else {
        ElMessage.error("签署失败");
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.submitBtns();
      this.hintVisible = false;
    },
    // 点击勾选协议按钮
    // 点击勾选协议按钮
    async submitBtn() {
      if (
        this.form.a == "" ||
        this.form.b == "" ||
        this.form.c == "" ||
        this.form.d == "" ||
        this.form.e == "" ||
        this.form.f == "" ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0 ||
        this.invoiceData == null ||
        this.contractData == null
      )
        return ElMessage.error("请输入内容");
      if (this.radio) this.radio = !this.radio;
      this.loading = true;
      this.showAgreementVisible = true;
      let productcode = this.contract.productcode;
      let parameter = {
        productcode: productcode,
        acceptor: localStorage.getItem("entname"),
      };
      let data = await Contracts(parameter);
      if (data.code != 100) {
        this.showAgreementVisible = false;
        ElMessage.error("产品编号未进行模板配置，请联系管理员进行配置");
        this.loading = false;
        return;
      }
      this.officertel = data.data.ent.fincerttel;
      this.operatetel = data.data.ent.operateTel;
      this.contract.entname = data.data.ent.entname;
      this.contract.FRaccountid = data.data.ent.fraccountid;
      this.contract.inputdate = data.data.ent.inputdate;
      this.contract.JBRaccountid = data.data.ent.jbRaccountid;
      this.contract.licenseno = data.data.ent.licenseno;
      this.contract.mainindname = data.data.ent.mainindname;
      this.contract.officer = data.data.ent.operatename;
      this.contract.officertel = data.data.ent.fincerttel;
      this.contract.ORGaccountid = data.data.ent.qyaccountid;
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = "");
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = "");
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = "");
      this.contract.radio = data.data.radio;

      let GetcreateContractReview = await createContractReview(this.contract);
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss;
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data;
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == "企业授权协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "first";
              this.activeName = "first";
            } else if (this.list[i].name == "技术服务协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "second";
              this.activeName = "second";
            }
          }
          this.loading = false;
        } else {
          this.list = GetcreateContractReview.data.data.file;
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == "企业授权协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "first";
              this.activeName = "first";
            } else if (this.list[i].name == "技术服务协议.pdf") {
              this.list[i].name = this.list[i].name.split(".")[0];
              this.list[i].names = "second";
              this.activeName = "second";
            }
          }
          this.loading = false;
        }
      } else {
        this.showAgreementVisible = false;
        ElMessage.error("产品编号未进行模板配置，请联系管理员进行配置");
      }
      this.submitBtns();
    },

    submitBtns() {
      if (
        (this.form.a != "") &
        (this.form.b != "") &
        (this.form.c != "") &
        (this.form.d != "") &
        (this.form.e != "") &
        (this.form.f != "") &
        this.radio &
        (this.fileListFront.length != 0) &
        (this.fileListReverse.length != 0) &
        (this.invoiceData != null) &
        (this.contractData != null)
      ) {
        this.btn = true;
      } else {
        this.btn = false;
      }
    },
    // 删除
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file);
      this.fileListFront = [];
      this.submitBtns();
    },
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file);
      this.fileListReverse = [];
      this.submitBtns();
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    a() {
      this.submitBtns();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  .bbb {
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 14px;
    color: #606266;
    margin-right: 8px;
  }
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 250px;
            height: 3px;
            margin: 0 8px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .unit {
    z-index: 998;
    position: relative;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      left: 430px;
      top: 75px;
    }
    left: 430px;
    top: 55px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 14px;
    color: #606266;
  }
  .f2 {
    margin-top: 1%;
    width: 100%;
    // @media only screen and (min-width: 800px) and (max-width: 1950px) {
    //   height: 400px;
    // }
    // overflow: auto;
    ul {
      // display: flex;
      // flex-direction: column;
      // align-items: center;
      // background-color: #f00;
      li {
        position: relative;
        // width: 75%;
        margin-bottom: 15px;
        height: 50px;
        display: flex;
        justify-content: center;
        // background-color: #ff0;
        // background-color: #f00;
      }
    }
  }
  // 发票信息
  .f3 {
    // height: 300px;
    overflow: auto;
    box-sizing: border-box;
    padding: 10px 25px;
    width: 100%;
    margin-top: 35px;
    // @media only screen and (min-width: 1580px) and (max-width: 1950px) {
    //   height: 520px;
    // }
    .null {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      .newly {
        display: flex;
        position: absolute;
        left: 8px;
        width: 140px;
        h4 {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 8px;
          cursor: pointer;
        }
        h5 {
          width: 46px;
          height: 20px;
          background: #0a7be0;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          cursor: pointer;
        }
      }
      img {
        width: 220px;
      }
      p {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b3b3b3;
      }
    }
    .notNull {
      width: 100%;
      // 新增按钮
      .newly {
        display: flex;
        width: 140px;
        margin: 30px 1px;
        h4 {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 8px;
          cursor: pointer;
        }
        h5 {
          width: 46px;
          height: 20px;
          background: #0a7be0;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          margin-left: 5px;
          margin-top: 1px;
          cursor: pointer;
        }
      }
      // 说明文字
      .explain {
        display: flex;
        font-size: 12px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b1b1b1;
        margin: 25px 0;
        p {
          margin-bottom: 6px;
        }
      }
      // 表格编辑/查看
      .span {
        display: inline-block;
        width: 30px;
        height: 24px;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #0a7be0;
        border-bottom: 1px solid #0a7be0;
        cursor: pointer;
        margin-right: 5px;
      }
      .disable {
        color: #aaa;
        border-bottom: 1px solid #aaa;
      }
      // 删除按钮样式
      .del {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ff6060;
        border-bottom: 1px solid #ff6060;
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 25px;
        text-align: center;
        margin-top: 40px;
        user-select: none;
        span {
          font-size: 14px;
          color: #666;
          margin-left: 7px;
        }
        img {
          width: 15px;
          height: 15px;
          cursor: pointer;
        }
        a {
          font-size: 14px;
          color: #0a7be0;
        }
      }
      // 按钮组
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        margin: 90px 0 60px 0;
        cursor: pointer;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 180px;
          height: 34px;
          background: #0a7be0;
          border-radius: 4px;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ffffff;
          margin-right: 30px;
        }
        .btn1 {
          background-color: #bfbfbf;
        }
        // 提交按钮
        .btn3 {
          background-color: #ccc;
          &.active {
            background-color: #0a7be0;
          }
        }
      }
    }
  }
  // .f2::-webkit-scrollbar {
  //   width: 5px;
  //   height: 10px;
  //   background-color: #fff;
  // }

  // .f2::-webkit-scrollbar-thumb {
  //   border-radius: 2px;
  //   background: rgba(36, 143, 172, 0.5);
  // }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-top: 15px;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 34px;
      background: #0a7be0;
      border-radius: 4px;
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 300;
      color: #ffffff;
      margin-right: 30px;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #0a7be0;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  .license {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    // background-color: #f00;
    // margin-left: 305px;
    // @media only screen and (min-width: 1580px) and (max-width: 1950px) {
    //   margin-left: 487px;
    // }
    .permit {
      position: relative;
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;
      width: 220px;
      height: 140px;
      margin-right: 20px;
      overflow: hidden;
      cursor: pointer;
    }
    .permit-front {
      background: url(@/assets/PC/新增补充切图/03商票驿/组70.png) no-repeat;
      background-size: 100% 100%;
    }
    .permit-reverse {
      background: url(@/assets/PC/新增补充切图/03商票驿/组71.png) no-repeat;
      background-size: 100% 100%;
    }
    .card {
      height: 123px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .license-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      div {
        width: 100%;
        .examine {
          margin-bottom: 10px;
          height: 20px;
          color: #0a7be0;
          text-decoration: underline;
          cursor: pointer;
        }
        p {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          line-height: 24px;
        }
      }
    }
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25px;
    text-align: center;
    margin-top: 15px;
    user-select: none;
    span {
      font-size: 14px;
      color: #666;
      margin-left: 7px;
    }
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    a {
      font-size: 14px;
      color: #0a7be0;
    }
  }
  // 弹出框
  .dialog-centers {
    margin: 0 auto;
    width: 90%;
  }
  .dialog-center {
    box-sizing: border-box;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 520px;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 520px;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 660px;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 600px;
        height: 460px;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 600px;
        height: 460px;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 760px;
        height: 580px;
      }

      background-color: #fff;

      h1 {
        font-size: 18px;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    flex-wrap: wrap;
    p {
      margin-bottom: 15px;
    }
  }

  //合同信息，发票信息弹框
  // 弹出框
  .dialog-centerss {
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    z-index: 998;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #0a7be0;
      border: 1px solid #0a7be0;
      border-radius: 4px;
      background-color: #fff;
      z-index: 998;
    }
    .btn2 {
      color: #fff;
      background-color: #0a7be0;
      z-index: 998;
    }
  }
  .el-form-item {
    margin-bottom: 10px;
    height: 45px;
    .file {
      font-size: 14px;
      margin-right: 10px;
      color: #0a7be0;
      text-decoration: underline;
      cursor: pointer;
      z-index: 998;
    }
    .file1 {
      color: #999;
    }
  }
}

::v-deep(.el-dialog__body) {
  padding: 0px;
}
::v-deep(.hint .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 56%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 49%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 40%;
    // background-color: #f00;
  }
}
::v-deep(.hint .el-dialog__body) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
}
// 协议
::v-deep(.inviteAffirmClient .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
// 发票，合同信息
::v-deep(.success .el-dialog) {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 37%;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 35%;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 27%;
  }
}
::v-deep(.el-dialog__header) {
  padding: 5px 20px;
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 300px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.el-form-item__label) {
  padding: 0 5px 0 0;
}

::v-deep(.success .el-dialog__header) {
  border-bottom: 1px solid #e7e7e7;
  padding: 15px 20px;
}
::v-deep(.success .el-dialog--center) {
  text-align: left;
}
::v-deep(.success .el-dialog__title) {
  font-size: 18px;
  color: #333333;
}

::v-deep(.el-upload-list__item-name) {
  width: 200px;
}
::v-deep(.el-input__prefix) {
  position: absolute;
  right: 5px;
}
/* 时间选择器 */
::v-deep(.el-input--large .el-input__wrapper) {
  padding: 1px 10px 1px 11px;
}
::v-deep(
    .el-upload-list--picture-card .el-upload-list__item-thumbnail,
    .el-upload-list--picture-card .el-upload-list__item-actions
  ) {
  width: 220px;
  height: 150px;
  margin-top: -5px;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item-actions) {
  margin-left: -20px;
}
::v-deep(.el-upload--picture-card) {
  display: inline-block;
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}
::v-deep(
    .el-upload-list--picture-card .el-upload-list__item-thumbnail,
    .el-upload-list--picture-card .el-upload-list__item-actions
  ) {
  width: 220px;
  height: 150px;
  margin-top: -5px;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item-actions) {
  margin-left: -20px;
}
::v-deep(.el-upload-list) {
  margin: 0px 0 0;
  padding: 0;
  list-style: none;
  position: absolute;
}
::v-deep(
    .el-upload-list--picture-card .el-upload-list__item-actions span + span
  ) {
  margin-left: 35px;
}
::v-deep(.el-upload--picture-card) {
  width: 240px;
}
</style>
<style lang="scss">
.el-popover {
  min-width: 100px !important;
}

// 上传

.el-upload-list--picture-card .el-upload-list__item {
  width: 265px;
  height: 148px;
  margin: 0;
  z-index: 998;
}
.el-upload--picture-card {
  line-height: 0;
}
.el-dialog__header {
  border: 0px;
}
</style>
